<template>
    <div>
        <!-- 暂无商品提示 -->
        <div
            class="empty-tips"
            v-if="goodsList == ''"
        >{{emptyTips}}</div>
        <!-- 暂无商品提示 -->

        <div class="goods-list">
            <div
                class="goods-item"
                v-for="(item,index) of goodsList"
                :key="index"
                @click="goDetail(item.id,goodsType)"
            >
                <div class="goods-img-box">
                    <img
                        class="goods-img"
                        v-lazy="item.imgs[0].title_img"
                    />
                    <img
                        class="free-get-icon"
                        src="@/assets/images/goodsDetail/free-get-icon.png"
                    />
                    <div class="goods-sale-num">已领取{{parseInt(item.sold)+parseInt(item.sold_virtual)}}件</div>
                </div>
                <div class="goods-name">{{item.title}}</div>
                <div class="goods-member-price">会员价 ￥<span>{{item.price_0/100}}</span></div>
                <div class="goods-market-price">零售价 ￥{{item.price_market/100}}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'CommonGoodList',
    props: ['goodsList', 'goodsType', 'emptyTips'],
    methods: {
        goDetail(value, type) {
            this.$router.push({
                path: '/goodsDetail',
                query: {
                    goodsId: value,
                    goodsType: type
                }
            })
        }
    },
    filters: {
        currency(value) {
            return parseFloat(value / 100).toFixed(2)
        }
    }
}
</script>

<style lang="stylus" scoped>
.empty-tips
    font-size 0.38rem
    color #999
    text-align center
    line-height 3rem
.goods-list
    display flex
    justify-content flex-start
    flex-wrap wrap
    padding 0 0.26rem 0.26rem 0.26rem
    .goods-item
        width 49%
        background #fff
        border-radius 3px
        overflow hidden
        margin-right 2%
        margin-bottom 2%
        padding-bottom 0.37rem
        box-sizing border-box
        .goods-img-box
            position relative
            width 100%
            height 0
            padding-bottom 100%
            overflow hidden
            .goods-img
                width 100%
            .free-get-icon
                position absolute
                right 0.13rem
                top 0.13rem
                height 0.69rem
            .goods-sale-num
                position absolute
                left 0
                right 0
                bottom 0
                line-height 0.58rem
                text-align center
                background #4b806b
                font-size 0.29rem
                color #fff
        .goods-name
            display -webkit-box
            -webkit-box-orient vertical
            overflow hidden
            -webkit-line-clamp 2
            word-break break-all
            line-height 0.5rem
            height 0.98rem
            padding 0 0.41rem
            font-size 0.37rem
            color #323232
            margin-top 0.35rem
        .goods-member-price
            margin-top 0.35rem
            padding 0 0.41rem
            font-size 0.32rem
            color #131313
            line-height 1.5
            span
                font-size .4rem
                font-weight bold
        .goods-market-price
            padding 0 0.41rem
            font-size 0.32rem
            color #999
            line-height 1.5
    .goods-item:nth-child(2n)
        margin-right 0
</style>


